Vue3 XML Pretty Print與Theme呈現

為了讓原始XML顯示在Web上有類似Notepad++的外掛工具：XML Tools之Pretty Print功能可以讓XML做排版並以顏色區分顯示，如下圖：

首先需要先準備安裝套件
vkbeautify

npm i vkbeautify

highlight.js

npm install highlight.js

@highlightjs/vue-plugin

npm install @highlightjs/vue-plugin

在任何頁面或元件引用vkbeautify並撰寫如下：

import vkBeautify from 'vkbeautify'

 data() {
    return {
        HermesMessage: null
    }
}

 /**
 * 測試XML字串
 */
const xmlData = `
<Hermes Timestamp="2023-10-16T08:56:35.308">
    <ServiceDescription MachineId="Conveyor" LaneId="1" InterfaceId="" Version="1.4">
        <SupportedFeatures>
            <FeatureCheckAliveResponse />
            <FeatureSendBoardInfo />
            <FeatureCommand />
        </SupportedFeatures>
    </ServiceDescription>
</Hermes>`

 var pretty = vkBeautify.xml(xmlData)  

 this.HermesMessage = pretty

main.js裡引用highlight.js作為全域用

import 'highlight.js/styles/stackoverflow-dark.css'
import hljs from 'highlight.js/lib/core'
import xml from 'highlight.js/lib/languages/xml'
import hljsVuePlugin from '@highlightjs/vue-plugin'

hljs.registerLanguage('xml', xml)

const app = createApp(App)
app.use(hljsVuePlugin)

在任何頁面或元件裡引用highlight.js

import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'

components: {
    highlightjs: hljsVuePlugin.component
}

在template裡寫：

 <highlightjs language="xml" :code="HermesMessage" />

呈現如下圖：

完美達陣！
參考資料來源：

https://github.com/highlightjs/vue-plugin
https://github.com/vkiryukhin/vkBeautify